<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单校验</title>
    <style>
        .warn{
            font-size: 14px;
            color: #dc8aff;
        }
        .success{
            font-size: 14px;
            color:green;
        }
        .fail{
            font-size: 14px;
            color: red;
        }
    </style>
    <script>
        function f1(){
            // alert("元素获得焦点");
            document.getElementById("s1").innerHTML = "用户名由英文字母数字下划线组成,长度6-16位,必须由英文字母开头"
            document.getElementById("s1").className = "warn";
        }
        function checkUsername(){
            // alert("失去焦点");
            let username = document.getElementById("username").value;
            let regExp = /^[a-z]\w{5,15}$/i;
            let s1 = document.getElementById("s1");
            if(regExp.test(username)){
                s1.innerHTML = "用户名格式正确";
                s1.className = "success";
                // document.getElementById("btn").disabled = false;
                return true;
            }
            s1.innerHTML = "用户名格式错误";
            s1.className = "fail";
            // document.getElementById("btn").disabled = true;
            return false;
        }
        function f2(){
            // alert("元素获得焦点");
            document.getElementById("s2").innerHTML = "用户名由英文字母数字下划线以及一些特殊字符!@#$%^&*()组成,长度8-16位"
            document.getElementById("s2").className = "warn";
        }
        function checkPassword(){
            // alert("失去焦点");
            let password = document.getElementById("password").value;
            let regExp = /^[a-z0-9_!@#$%^&*()]{8,16}$/i;
            let s2 = document.getElementById("s2");
            if(regExp.test(password)){
                s2.innerHTML = "密码格式正确";
                s2.className = "success";
                // document.getElementById("btn").disabled = false;
                return true;
            }
            s2.innerHTML = "密码格式错误";
            s2.className = "fail";
            // document.getElementById("btn").disabled = true;
            return false;
        }
        function checkForm(){
            if(checkUsername() && checkPassword()){
                return true;
            }
            return false;
        }
    </script>
</head>
<body>
<!--
    表单事件onsubmit="return xxx"
        当xxx的值为false时,表单不会提交
        当xxx的值不是false时,表单正常提交
        onsubmit="return false"表示禁止表单提交
        因此,可以写一个表单事件
        该表单事件用于判断表单元素格式是否全部正确
        只要有一个不正确,则返回false即可
-->
<form action="01-hello.html" onsubmit="return checkForm()">
<!--<form action="01-hello.html">-->
    <!--
        用户名由英文字母数字下划线组成,长度6-16位,必须由英文字母开头
    -->
    用户名:<input type="text" id="username" onfocus="f1()" onblur="checkUsername()"/><span id="s1"></span><br/>
    <!--
        用户名由英文字母数字下划线以及一些特殊字符!@#$%^&*()组成,长度8-16位
    -->
    密&nbsp;&nbsp;&nbsp;&nbsp;码:<input type="password" id="password" onfocus="f2()" onblur="checkPassword()"/><span id="s2"></span><br/>
    手机号:<input type="phone" id="phone"/><span id="s3"></span><br/>
    邮&nbsp;&nbsp;&nbsp;&nbsp;箱:<input type="email" id="email"/><span id="s4"></span><br/>
    <input id="btn" type="submit" value="提交" >
</form>
</body>
</html>